<template>
        <div v-if="showProgress" :progress-time="progressTime" :progress-text="progressText" class="v-modal" style="opacity: 0.8; z-index: 9998;">

            <div class="progress-container">
                <div class="my-progress">
                    <el-progress :show-text="false" :stroke-width="15" :percentage="percentAge" status="success"></el-progress>
                </div>

                <p v-if="percentAge < 100"><i class="el-icon-loading"></i>&nbsp;{{progressText}}</p>
                <p v-else><i class="el-icon-circle-check-outline"></i>&nbsp;{{progressFinishText}}</p>
            </div>

        </div>
</template>
<script>
    export default {
        name: 'sdProgress',
        props: {
            progressText: {
                required: true,
                default: '',
            },
            progressTime: {
                required: false,
                default: 5, //秒
            }
        },
        data () {
            return {
                showProgress: false,
                percentAge: 0,
                progressFinishText: ''
            }
        },
        model: {
            prop: 'value',
            event: 'change'
        },
        methods: {
            //打开弹窗
            handleOpenProgress(){
                console.log("handleOpenProgress");
                this.showProgress = true;
                this.percentAge = 0;

                let _this = this;
                let interval = setInterval(function () {
                    _this.percentAge += 1;
                    if(_this.percentAge >= 95){
                        clearInterval(interval);
                    }
                }, this.progressTime*10); // n*1000/100
            },

            //关闭弹窗
            handleFinishProgress(finishText) {
                console.log("handleFinishProgress");
                this.progressFinishText = finishText ? finishText : $t('components.progress.completed');
                let _this = this;
                let interval = setInterval(() => {
                    _this.percentAge += 1;
                    if(_this.percentAge >= 100){
                        clearInterval(interval);
                        //关闭
                        setTimeout(() => {
                            _this.showProgress = false;
                        }, 1000)
                    }
                }, 20);
            },

            //接口遇到错误，立即关闭
            handleCloseProgress() {
                console.log("handleCloseProgress");
                this.showProgress = false;
            }
        }
    }
</script>
<style type="scss" scoped>
    .progress-container {
        position: absolute;
        height: 50px;
        width: 20%;
        top: 45%;
        left: 40%;
    }
    .progress-container .my-progress {
        width: 50%;
        margin: 0 auto;
    }
    .progress-container p{
        width: 100%;
        height: 30px;
        text-align: center;
        color: #ffffff;
        line-height: 30px;
    }
</style>
